<template>
	<view class="content">
		<view class="header clear-both">
			<view class="float-l fs14 color6">已满<text class="colorm">199.00</text>元，可换购超值商品</view>
			<view class="float-r fs14 color6">已选 <text class="colorFF6">5/5</text></view>
		</view>
		<view class="cakeList">
			<view class="cake-item clear-both" v-for="(item,index) in cakeList" :key="index">
				<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="float-l cake-img"></image>
				<view class="float-l cake-info">
					<view class="fs14 color3 mab">{{item.name}}</view>
					<view class="fs12 colora2">规格：{{item.guige}}</view>
					<view class="bot">
						<text class="fs16 colorm font-weight">{{item.prise}}</text>
						<text class="fs14 color9">{{item.size}}</text>
						<text class="fs14 colorc del">{{item.yj}}</text>
					</view>
				</view>
				<view :class="['btn fs12',{'no-btn':chooseLength>=5} ,{'cx-btn':chooseIndex==index}]" @click="choose(index)">{{chooseIndex==index?'重新选择':'选择'}}</view>
			</view>
		</view>
		<view class="fs18 colorf text-center done">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseIndex:-1,
				chooseLength:0,
				cakeList:[{name:'吉致泡芙 0.2磅×4只',guige:'香草味',prise:'¥688.00',size:'/杯',yj:'¥88.00'},{name:'吉致泡芙 0.2磅×4只',guige:'香草味',prise:'¥688.00',size:'/杯',yj:'¥88.00'},{name:'吉致泡芙 0.2磅×4只',guige:'香草味',prise:'¥688.00',size:'/杯',yj:'¥88.00'},{name:'吉致泡芙 0.2磅×4只',guige:'香草味',prise:'¥688.00',size:'/杯',yj:'¥88.00'},{name:'吉致泡芙 0.2磅×4只',guige:'香草味',prise:'¥688.00',size:'/杯',yj:'¥88.00'}]
			};
		},
		methods:{
			choose:function(index){
				this.chooseIndex=index
			}
		}
	}
</script>

<style lang="scss">
.content{
	padding-bottom: 13.8667vw;
	.header{
		height: 13.8667vw;
		line-height: 13.8667vw;
		border-bottom: 2upx solid #F2F2F2;
		padding:0 4.2667vw;
	}
	.cakeList{
		margin: 0 4.2667vw;
		.cake-item{
			height: 26.667vw;
			margin: 6.4vw 0;
			position: relative;
			.cake-img{
				width: 26.667vw;
				height: 26.667vw;
				margin-right: 2.1334vw;
			}
			.cake-info{
				height: 26.667vw;
				position: relative;
				max-width: 47vw;
				.mab{
					margin-bottom: 1vw;
				}
				.bot{
					position: absolute;
					left: 0;
					bottom: 0;
					white-space: nowrap;
					.del{
						margin-left: 2vw;
						text-decoration:line-through;
					}
				}
			}
			.btn{
				position: absolute;
				right: 0;
				bottom: 0;
				height: 7.4667vw;
				line-height:7.4667vw;
				text-align: center;
				background: #00449F;
				color: #fff;
				padding:0 4.2667vw;
				border-radius: 3.73335vw;
			}
			.cx-btn{
				border: 2upx solid #00449F;
				background: #fff;
				color: #00449F;
			}
			.no-btn{
				background: #F2F2F2;
				color: #CCC;
			}
		}
	}
	.done{
		height: 13.8667vw;
		line-height: 13.8667vw;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9999;
		background: #00449F;
	}
}
</style>
